<template>
  <section id="alipayPage">
    <el-row style="line-height: 30px; padding-bottom: 10px;" class="flex">
      <el-col :span="5" class='flex'>
        <span class="title1" style='white-space:nowrap;padding: 0 3px'>流水号:</span>
        <el-input v-model="form.orderInfo" placeholder="请输入流水号"></el-input>
      </el-col>
      <el-col :span="5" class='flex'>
        <span class="title1" style='white-space:nowrap;padding: 0 3px'>备注:</span>
        <el-input v-model="form.remark" placeholder="请输入备注"></el-input>
      </el-col>
      <el-col :span="2" style="text-align: left;padding-left: 10px">
        <el-button type="primary" size="small" @click="getAliPayList">查询</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
      <el-table-column type="index" width="80">
      </el-table-column>
      <el-table-column prop="name" label="商户名">
      </el-table-column>
      <el-table-column prop="name" label="支付账号">
      </el-table-column>
      <el-table-column prop="amount" label="金额" width="100">
      </el-table-column>
      <el-table-column prop="orderInfo" label="流水号" width="200">
      </el-table-column>
      <el-table-column prop="payDate" label="支付日期">
      </el-table-column>
      <el-table-column prop="remark" label="备注">
      </el-table-column>
      <el-table-column prop="status" label="状态">
      </el-table-column>
    </el-table>
    <!--<div class="block" style="text-align: right;padding: 10px 20px;">-->
    <!--<el-pagination-->
    <!--@current-change="handleCurrentChange"-->
    <!--:current-page.sync="form.pageNumber"-->
    <!--:page-size="form.pageSize"-->
    <!--layout="total, prev, pager, next"-->
    <!--:total="total">-->
    <!--</el-pagination>-->
    <!--</div>-->
  </section>
</template>

<script>
  import dateformat from 'dateformat'

  export default {
    data () {
      return {
        tableData: [],
        total: 1,
        form: {
          orderInfo: undefined,
          remark: undefined
        },
        loading: false
      }
    },
    created () {
//      this.getAliPayList()
    },
    methods: {
      getAliPayList () {
        if (this.form.remark === '') {
          this.form.remark = undefined
        }
        if (this.form.orderInfo === '') {
          this.form.orderInfo = undefined
        }
        this.$api.getAliPayList(this.form).then(res => {
          this.loading = false
          this.tableData = res.data
          this.tableData.forEach(item => {
            if (item.payDate) {
              let date = new Date(item.payDate)
              item.payDate = dateformat(date, 'yyyy-mm-dd HH:MM')
            }
          })
          this.$message.success('查询成功')
        })
      },
      handleCurrentChange (val) {
        this.form.pageNumber = val
        this.getAliPayList()
      }
    }

  }
</script>

<style lang="less">
  #alipayPage {
    padding: 10px;
    th {
      text-align: center;
    }

    .el-input__inner {
      height: 25px;
      font-size: 12px;
    }
    .el-input {
      width: 160px;
      display: inline-block;
      margin: 0 8px;
      margin: 0;
    }

    .title1 {
      font-size: 14px;
    }
  }
</style>
